<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>所有商品</title>
  <link rel="stylesheet" type="text/css" th:href="@{/res/static/css/main.css}">
  <link rel="stylesheet" type="text/css" th:href="@{/res/layui/css/layui.css}">
  <script type="text/javascript" th:src="@{/res/layui/layui.js}"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>
<!--引入顶部 登录信息页面-->
<div th:replace="/commons/bar::#topLog"></div>

<!--引入顶部 查询收搜框-->
<div th:replace="/commons/bar::#queryHeader"></div>

  <div class="content content-nav-base commodity-content">
    <!--引入内容的导航页签-->
    <div th:replace="/commons/bar::#navigationTab"></div>

    <div class="commod-cont-wrap">
      <div class="commod-cont w1200 layui-clear">
        <div class="left-nav">
          <div class="title">所有分类</div>
          <div class="list-box">
            <dl th:each="goods : ${goodsClassify}">
              <dt th:text="${goods.classifyName}">奶粉辅食</dt>
              <dd th:each="childGoods:${goods.goodsClassify}"><a href="javascript:;" th:href="@{/product/commodity.html(goodsClassifyId=${childGoods.id})}"  th:text="${childGoods.classifyName}">进口奶粉</a></dd>
            </dl>

          </div>
        </div>

        <div class="right-cont-wrap">
          <div class="right-cont">
            <div class="sort layui-clear">
              <a class="active" href="javascript:;" event = 'volume'>销量</a>
              <a href="javascript:;" event = 'price'>价格</a>
              <a href="javascript:;" event = 'newprod'>新品</a>
              <a href="javascript:;" event = 'collection'>收藏</a>
            </div>
            <div class="prod-number">
              <span><span th:text="${goodsList.total}" id="total" />个</span>
            </div>
            <div class="cont-list layui-clear" id="list-cont">

              <div class="item" th:each="goods :${goodsList}">
                <div class="img">
                  <a href="javascript:;" th:attr="id=${goods.goodsId}"><img th:src="${goods.goodsImg}"></a>
                </div>
                <div class="text">
                  <p class="title" th:text="${goods.goodsName}"></p>
                  <p class="price">
                    <span class="pri" th:each="goodsSpecs,userStat: ${goods.goodsSpecs}" th:if="userStat.first">￥[[${goodsSpecs.goodsPrice}]]</span>

                    <span class="nub">1266付款</span>
                  </p>
                </div>
              </div>



              <!--<div class="item">
                <div class="img">
                  <a href="javascript:;"><img src="../res/static/img/paging_img1.jpg"></a>
                </div>
                <div class="text">
                  <p class="title">森系小清新四件套</p>
                  <p class="price">
                    <span class="pri">￥200</span>
                    <span class="nub">1266付款</span>
                  </p>
                </div>
              </div>-->
            </div>
            <!-- 模版引擎导入 -->
            <!-- <script type="text/html" id="demo">
              {{# layui.each(d.menu.milk.content,function(index,item){}}    
                <div class="item">
                  <div class="img">
                    <a href="javascript:;"><img src="{{item.img}}"></a>
                  </div>
                  <div class="text">
                    <p class="title"></p>
                    <p class="price">
                      <span class="pri">{{item.pri}}</span>
                      <span class="nub">{{item.nub}}</span>
                    </p>
                  </div>
                </div>
              {{# }); }}
            </script> -->
            <div id="demo0" style="text-align: center;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
<script  type="text/javascript">


      var goodsClassifyId = '[[${goodsQuery.goodsClassifyId}]]';


  layui.config({
    base: '../res/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
  }).use(['mm','laypage','jquery'],function(){
      var laypage = layui.laypage,$ = layui.$,
     mm = layui.mm;
       laypage.render({
        elem: 'demo0',
           limit:[[${goodsList.pageSize}]],//每页显示的数量
           curr:[[${goodsList.pageNum}]],  //当前显示页的页面

        count: [[${goodsList.total}]] //数据总数
           ,jump: function(obj, first){
               //obj包含了当前分页的所有参数，比如：
               //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
              // console.log(obj.limit); //得到每页显示的条数

               //首次不执行
               if(!first){
                  window.location.href="/product/commodity.html?goodsClassifyId="+goodsClassifyId+"&currentPage="+obj.curr +"&pageSize=" +obj.limit;
               }
           }
      });


    // 模版引擎导入
    //  var html = demo.innerHTML;
    //  var listCont = document.getElementById('list-cont');
    //  // console.log(layui.router("#/about.html"))
    // mm.request({
    //     url: '../json/commodity.json',
    //     success : function(res){
    //       console.log(res)
    //       listCont.innerHTML = mm.renderHtml(html,res)
    //     },
    //     error: function(res){
    //       console.log(res);
    //     }
    //   })

    $('.sort a').on('click',function(){
      $(this).addClass('active').siblings().removeClass('active');
    })
    $('.list-box dt').on('click',function(){
      if($(this).attr('off')){
        $(this).removeClass('active').siblings('dd').show()
        $(this).attr('off','')
      }else{
        $(this).addClass('active').siblings('dd').hide()
        $(this).attr('off',true)
      }
    })
      $("a[id]").click(function () {
          window.location.href="/product/details.html?goodsId="+this.id;
      })
});


</script>



</body>
</html>